<template>
    <div class="dropdown_list">
        <van-dropdown-menu  active-color="#02ccbd">
            <van-dropdown-item title="组织" ref="organization">
                <div class="organization_list">
                    <van-loading size="24px" vertical v-if="isDisabled">加载中...</van-loading>
                    <!-- 无限极递归联动(后端返回固定数据格式) -->
                    <ms-form-organization  v-else :organization="organizationTree" @organizationNavs="organizationNavs"></ms-form-organization>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="店导身份" :options="guides" v-model="selectedGuide" @change="guideChange">
            </van-dropdown-item>
            <van-dropdown-item title="是否转正" :options="optionIsMenber" v-model="selectedIsMenber" @change="isMenberChange">
            </van-dropdown-item>
        </van-dropdown-menu>
    </div>
</template>
<script>
import MsFormOrganization from '@/components/FormOrganization'
export default {
    name:'FilterData',
    data(){
        return {
            selectedGuide:'All',
            selectedIsMenber:'-1',
            optionIsMenber: [
                { text: '全部', value: '-1' },
                { text: '试用', value: '0' },
                { text: '转正', value: '1' }
            ],
        }
    },
    props:{
        organizationTree:{
            type:Array,
            default:()=>[]
        },
        guides:{
            type:Array,
            default:()=>[]
        },
        isDisabled:{
            type:Boolean,
            default:true
        },
    },
    components: {
        MsFormOrganization
    },
    methods:{
        //筛选组织
        organizationNavs(data){
            console.log(data)
            this.$emit('organizationNavs',data);
            this.$refs.organization.toggle();
        },
        //筛选店导身份
        guideChange(val){
            console.log(val)
            this.$emit('filterGuides',val);
        },
        //筛选是否转正
        isMenberChange(val){
            console.log(val)
            this.$emit('filterIsMenber',val);
        },
    }
}
</script>
<style lang="less" scoped>
    .dropdown_list{
        width: 100%;
        max-height: 380px;
        overflow: hidden;
        .van-dropdown-menu{height: 44px;}
        .organization_list{
            width: 100%;
            height: 335px;
            background: #fff;
            overflow: hidden;
        }
    }
</style>